<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/*思路：1.去除元素默认外边距【通配选择选择器】 设置背景颜色
			       2.product_card 设置样式：内边距，边框设置颜色，加倒角
				   加阴影，所有内容：居中 text-align:center
				   3.图片边框倒角，外边距？
				   4.小米su7  文字：外边距？
				   5.¥279999.00 文字大小，外边距？
				   */
			
				#product_card{
				background: #fefefe;
				width: 200px;
				height: 370px;	
				text-align: center;
				padding: 10px;
				box-shadow:0.5px 0.4px 3px 3px #d5d5d5 inset;
				}
		    img{
				border-radius: 5px 5px 5px 5px;
			}
			#ss{
				width: 230px;
				height: 50px;
				box-shadow:0.5px 0.4px 3px 3px #d5d5d5 inset;
				border-radius: 5px 5px 5px 5px;
				
			}	
			#red{
				width: 65px;
				height: 40px;
				background-color: red;
				border-radius: 5px 5px 5px 5px;
				position: relative;
				bottom: 65px;
				left: 150px;
			}
			#jdsp{
				color: #8a8a8a;
				padding: 15px;		
			}
				
		</style>
	</head>
	<body>
		<div id="product_card">
			<img src="img/1c337a787850ecab0efc37be5910fb5.jpg" alt="su7" width="170px" height="240px">
		    <h3 style="font-size: 15px;">小米su7</h3>
			<p style="color: red;font-size: 15px;" id="price">¥279999.00</p>
			<p style="color: dimgray;font-size: 10px;">已有<span>10万+人</span>评价</p>
		</div>
		<div id="ss">
			
            <div id="jdsp">搜索 京东商品</div>
				<p style="color: white;"></p>
			<button id="red">
			<p style="color: white; font-size: 15px;">搜索
			</p>
			</button>
			</div>
		</div>
	</body>
</html>